<template>
  <div class="document-module">
    <el-form inline :model="formInline">
      <el-form-item label="栏目：">
        <el-select v-model="formInline.column" placeholder="请选择归属栏目">
          <el-option label="所有栏目" value=""></el-option>
          <el-option label="网站简介" value="网站简介"></el-option>
          <el-option label="网络工具" value="网络工具"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题：">
        <el-input v-model="formInline.title" placeholder="请输入查询文章的标题"></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-radio-group v-model="formInline.state">
          <el-radio label="发布"></el-radio>
          <el-radio label="审核"></el-radio>
          <el-radio label="删除"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="column" label="栏目" width="100"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="weight" label="权重" width="50"> </el-table-column>
      <el-table-column prop="count" label="点击数" width="70"> </el-table-column>
      <el-table-column prop="user" label="发布者" width="155"> </el-table-column>
      <el-table-column prop="time" label="更新时间" width="155"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleVisit(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  const data = [
    {
      column: '网站简介',
      title: '文章标题',
      weight: '2',
      count: '10',
      user: '系统管理员',
      time: '2022-2-22 22:22:22',
      state: '发布'
    },
    {
      column: '网络工具',
      title: '测试筛选标题',
      weight: '2',
      count: '20',
      user: '系统管理员',
      time: '2022-2-22 22:22:22',
      state: '审核'
    },
    {
      column: '网站简介',
      title: '文章标题',
      weight: '2',
      count: '30',
      user: '系统管理员',
      time: '2022-2-22 22:22:22',
      state: '删除'
    },
    {
      column: '网络工具',
      title: '文章标题',
      weight: '2',
      count: '40',
      user: '系统管理员',
      time: '2022-2-22 22:22:22',
      state: '发布'
    },
    {
      column: '网站简介',
      title: '文章标题',
      weight: '2',
      count: '50',
      user: '系统管理员',
      time: '2022-2-22 22:22:22',
      state: '发布'
    }
  ]
  export default {
    data() {
      return {
        formInline: { column: '', title: '', state: '' },
        tableData: []
      }
    },
    methods: {
      onSubmit() {
        console.log(this.formInline)
        this.getList().then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      handleVisit(row) {
        console.log(row)
      },
      handleEdit(row) {
        console.log(row)
      },
      getList() {
        return new Promise(res => {
          const result = data.filter(item => {
            let columnFlag = this.formInline.column
              ? item.column === this.formInline.column
                ? true
                : false
              : true
            let titleFlag = this.formInline.title
              ? new RegExp(this.formInline.title).test(item.title)
                ? true
                : false
              : true
            let stateFlag = this.formInline.state
              ? item.state === this.formInline.state
                ? true
                : false
              : true
            return columnFlag && titleFlag && stateFlag
          })
          res(result)
        })
      }
    },
    created() {
      this.getList().then(res => {
        console.log(res)
        this.tableData = res
      })
    }
  }
</script>
